<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Dashboard Content</title>
</head>
<body>
<div th:fragment="content">
    <div class="layui-row">
        <!-- 总用户数卡片 -->
        <div class="layui-col-md3">
            <div class="stat-card card-hover relative overflow-hidden">
                <!-- 卡片标题 -->
                <div class="stat-title text-sm font-medium text-gray-500 mb-2">
                    <i class="fa fa-users mr-1"></i> 总用户数
                </div>
                <!-- 数据展示 -->
                <div class="text-3xl font-bold text-primary leading-tight">
                    <span id="total-users">--</span>
                </div>
                <!-- 动态背景装饰 -->
                <div class="absolute right-0 bottom-0 bg-primary/10 w-40 h-40 rotate-45 translate-x-1/2 -translate-y-1/2 rounded-full opacity-20"></div>
            </div>
        </div>

        <!-- 文章总数卡片（重复结构，修改图标和标题） -->
        <div class="layui-col-md3">
            <div class="stat-card card-hover relative overflow-hidden">
                <div class="stat-title text-sm font-medium text-gray-500 mb-2">
                    <i class="fa fa-file-text-o mr-1"></i> 文章总数
                </div>
                <div class="text-3xl font-bold text-green-600 leading-tight">
                    <span id="total-articles">--</span>
                </div>
                <div class="absolute right-0 bottom-0 bg-green-600/10 w-40 h-40 rotate-45 translate-x-1/2 -translate-y-1/2 rounded-full opacity-20"></div>
            </div>
        </div>

        <!-- 评论总数卡片（重复结构，修改图标和标题） -->
        <div class="layui-col-md3">
            <div class="stat-card card-hover relative overflow-hidden">
                <div class="stat-title text-sm font-medium text-gray-500 mb-2">
                    <i class="fa fa-comment-o mr-1"></i> 评论总数
                </div>
                <div class="text-3xl font-bold text-yellow-500 leading-tight">
                    <span id="total-comments">--</span>
                </div>
                <div class="absolute right-0 bottom-0 bg-yellow-500/10 w-40 h-40 rotate-45 translate-x-1/2 -translate-y-1/2 rounded-full opacity-20"></div>
            </div>
        </div>

        <!-- 待审核卡片（重复结构，修改图标和标题） -->
        <div class="layui-col-md3">
            <div class="stat-card card-hover relative overflow-hidden">
                <div class="stat-title text-sm font-medium text-gray-500 mb-2">
                    <i class="fa fa-clock-o mr-1"></i> 待审核
                </div>
                <div class="text-3xl font-bold text-red-600 leading-tight">
                    <span id="total-pending">--</span>
                </div>
                <div class="absolute right-0 bottom-0 bg-red-600/10 w-40 h-40 rotate-45 translate-x-1/2 -translate-y-1/2 rounded-full opacity-20"></div>
            </div>
        </div>
    </div>

    <!-- 趋势图表与操作记录 -->
    <div class="layui-row mt-4">
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-header">数据趋势</div>
                <div class="layui-card-body">
                    <div id="trend-chart" style="height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">最近操作</div>
                <div class="layui-card-body">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>操作类型</th>
                            <th>时间</th>
                        </tr>
                        </thead>
                        <tbody id="recent-actions">
                        <tr><td>用户登录</td><td>2025-04-05 10:30</td></tr>
                        <tr><td>文章发布</td><td>2025-04-05 11:15</td></tr>
                        <tr><td>评论审核</td><td>2025-04-05 12:45</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 快速操作按钮 -->
    <div class="layui-row mt-4">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">快速操作</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <button class="layui-btn" data-page="users">
                            <i class="fa fa-users"></i> 管理用户
                        </button>
                        <button class="layui-btn" data-page="articles">
                            <i class="fa fa-file-text-o"></i> 审核文章
                        </button>
                        <button class="layui-btn" data-page="categories">
                            <i class="fa fa-th-list"></i> 管理分类
                        </button>
                        <button class="layui-btn" data-page="stats">
                            <i class="fa fa-bar-chart"></i> 查看统计
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>